<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../js/li_jing/bootstrap-3.3.5-dist/css/bootstrap.css">
  <script src="../../js/li_jing/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../../js/li_jing/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    .contentbox {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      padding: 20px 40px 10px 30px;


    }

    .headbox {
      width: 98%;
      border-bottom: 1px solid #f2f2f2;
      font-size: 16px;
      line-height: 36px;

    }

    .tablebox {
      margin-top: 30px;
      margin-right: 50px;
    }

    .table {
      text-align: center;
    }

    th {
      text-align: center;
      background-color: #f4f4f4;
    }

    /* .foot{
            width: 100%;
            display: flex;
            position: absolute;
            bottom: 10px;
            left: 0px;
            right: 0px;
            justify-content: center;
        } */
    /* .page{
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: aliceblue;
            margin: 3px 3px;
            cursor: pointer;
        } */
    .del,
    .xiugai {
      cursor: pointer;
      margin-left: 5px;
      color: #108ee9;

    }
  </style>
</head>

<body>
  <div class="contentbox">
    <div class="headbox">
      <p>仓库列表</p>
    </div>


    <div class="tablebox">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>仓库名称</th>
            <th>满金额包邮</th>
            <th>仓库地址</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="mytable"></tbody>
      </table>
    </div>

  </div>

  <!-- 用boots写删除模态框 -->
  <!-- 删除产生模态框 -->
  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="deleteModalLabel">确认框</h4>
        </div>

        <div class="modal-body">
          <form>
            <div class="form-group">
              <label class="control-label">你确定删除该仓库信息吗？

              </label>
            </div>
          </form>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="qddel">确定</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        </div>

      </div>
    </div>
  </div>

  <!-- 编辑数据模态框 -->
  <div class="modal fade" id="XGmtb" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">编辑仓库信息</h4>
        </div>

        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">*仓库名称</label>
              <input type="text" class="form-control" id="name">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">*设置包邮金额</label>
              <input type="text" class="form-control" id="money">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">*仓库地址</label>
              <input type="text" class="form-control" id="address">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">*备注</label>
              <input type="text" class="form-control" id="note">
            </div>
          </form>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" id="qdxiugai" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let arr2 = [{
        "id": 0,
        "name": "一般贸易仓",
        "money": "500元",
        "address": "成都青白江仓库",
        "note": "一般贸易仓"
      },
      {
        "id": 1,
        "name": "保税仓",
        "money": "1000元",
        "address": "成都郫县",
        "note": "海外保税仓"
      },
      {
        "id": 2,
        "name": "奢侈品保税仓",
        "money": "2000元",
        "address": "成都郫县",
        "note": "海外保税仓"
      }
    ]

    // let dangqianyePage = 1  //默认展示第一页

    showData(arr2, 1)

    // 根据数据渲染table的dom节点 
    function show(data) {
      $('#mytable').html('')
      console.log("添加")
      for (let i = 0; i < data.length; i++) {
        $('#mytable').append(`
                <tr>
                    <td>${data[i].name}</td>  
                    <td>${data[i].money}</td>  
                    <td>${data[i].address}</td>  
                    <td>${data[i].note}</td>   
                    <td>
                        <span class='del' data-id='${data[i].id}' data-toggle="modal" data-target="#deleteModal" data-id='${data[i].id}'>
                            删除
                        </span>
                        <span class='xiugai' data-id='${data[i].id}' data-toggle="modal" data-target="#XGmtb" 
                            data-whatever="@mdo">编辑</span>
                    </td>  
                </tr>
                `)
      }
    }


    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 7
      dangqianyeData = data.slice(qishi, qishi + 7)
      // 调用上面渲染table的函数，将数据填充到表格中
      show(dangqianyeData)
      // 设置当前页颜色效果与其他页效果不一致
      // $('.page').eq(pageNum-1).addClass('active').siblings().removeClass('active')
      dangqianyePage = pageNum
    }


    // 删除仓库信息模态框的确定按钮，动态节点，用委托
    $('#mytable').on('click', '.del', function () {

      let num = $(this).attr('data-id')
      //在表格的删除按钮中获取到了相应数据的data-id
      let qddel = document.getElementById('qddel')
      // sbt是点击删除按钮后弹出模态框有一个确认删除按钮
      qddel.onclick = function () {
        for (i = 0; i < arr2.length; i++) {
          if (arr2[i].id == num) {
            arr2.splice(i, 1)
          }
        }
        for (let i = num; i < arr2.length; i++) {
          let a = arr2[i].id
          a -= 1
          arr2[i].id = a
        }
        searchArr = [...arr2]
        showData(searchArr, dangqianyePage)
        $('#deleteModal').modal('hide')
      }
    })

    // 编辑模态框的确定按钮，用委托
    $('#mytable').on('click', '.xiugai', function () {
      let num = $(this).attr('data-id')
      let qdxiugai = document.getElementById('qdxiugai')
      // qdxiugai是修改弹框的确定按钮
      qdxiugai.onclick = function () {
        let name = $('#XGmtb').find('.modal-body #name').val()
        let money = $('#XGmtb').find('.modal-body #money').val()
        let address = $('#XGmtb').find('.modal-body #address').val()
        let note = $('#XGmtb').find('.modal-body #note').val()
        if (name != ' ' && money != '' && address != '' && note != '') {
          for (i = 0; i < arr2.length; i++) {
            if (arr2[i].id == num) {
              arr2[i].name = name
              arr2[i].money = money
              arr2[i].address = address
              arr2[i].note = note
            }
          }
          searchArr = [...arr2]
          showData(searchArr, dangqianyePage)
          $('#XGmtb').modal('hide')

        } else {
          alert('请完整的输入所有信息')
        }

        $('#XGmtb').find('.modal-body #name').val('')
        $('#XGmtb').find('.modal-body #money').val('')
        $('#XGmtb').find('.modal-body #address').val('')
        $('#XGmtb').find('.modal-body #note').val('')
      }

    })
  </script>




















</body>

</html>